<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <header>
      <hgroup>
          <h1>主标题</h1>
          <h2>副标题</h2>
      </hgroup>
      <nav> 
          <ul>
              <li>首页</li>
              <li>论坛</li>
              <li>关于</li>
          </ul>
      </nav>
  </header>
  <main>
      <article>                                     <!--   article 独立的内容 -->
        <section>                                   <!--   section     区域 -->
           <input type="text" list="ele">        
           <datalist id="ele">                     <!--  datalist  选项列表 -->
              <option value="aaa"></option>  
              <option value="add"></option>  
              <option value="apple"></option>  
              <option value="aroud"></option>  
              <option value="abc"></option>   
              <option value="aaa"></option>  
              <option value="agrh"></option>  
           </datalist>

           <details>
               <summary>HTML</summary>
               <P>超位文本标记语言</P>
           </details>      <!-- detail / summary   文档细节/文档标题 -->

           <progress min="0" max="15" value="10"></progress><br>
           <meter min="0" max="100" value="30"> </meter><br>
           <meter min="0" max="100" value="10" low="40" high="70"> </meter><br>
           <meter min="0" max="100" value="80" low="40" high="70"> </meter><br>

           <p>今天是<time title="2/14"></time> <mark>情人节</mark>,街上人很多</p>
                                    <!-- time-定义日期或时间,mark-带有记号的文本 -->
        </section>
          <section>
              <ul>
                  <li>
                                 <!-- fiqure      描述图形或视频
                               figcaption  描述图像或视频的标题 -->
                      <figure>
                          <img src="./优酷.jpg" alt="">
                          <figcaption>
                            八百-浴血奋战<br>
                            张译王千源组团战敌寇
                          </figcaption>
                      </figure>
                  </li>
              </ul>
              <ul>
                <li>
                    <figure>
                        <img src="./优酷.jpg" alt="">
                        <figcaption>
                          八百-浴血奋战<br>
                          张译王千源组团战敌寇
                        </figcaption>
                    </figure>
                </li>
            </ul>  <ul>
                <li>
                    <figure>
                        <img src="./优酷.jpg" alt="">
                        <figcaption>
                          八百-浴血奋战<br>
                          张译王千源组团战敌寇
                        </figcaption>
                    </figure>
                </li>
            </ul>
          </section>
          <section></section>
          <section></section>
      </article>
      <aside></aside>
  </main>
  <footer></footer>  
</body>
</html>
<!-- header     页眉
    footer     页脚
    main       主体
    hgroup     标题组合
    nav        导航 -->